import React, { Component } from 'react'
/* antd的列表 */
import { List, Button, message, Modal } from 'antd'
/* 连接state中的数据 */
import { connect } from 'react-redux'
/* 引入state中的action的方法 */
import { set_read_state, del_msg } from '@/store/user/actionCreators'
class MsgList extends Component {
  render() {
    // console.log(this.props);
    return (
      <div>
        <List
          /* 头部标题 */
          header={<h3>消息中心</h3>}
          /* 边框 */
          bordered
          /* 数据源 */
          dataSource={this.props.msgLists}
          /* 遍历出来state中的数据 */
          renderItem={(item, index) => (
            <List.Item>
              {/* 每一项的内容 */}
              { item.content}
              <Button
                onClick={
                  () => {
                    /* 调用已读的方法 */
                    this.props.setReadState(index)
                  }
                }
                /* 通过改变state中的hasRead的真假 判断是否已读 */
                disabled={item.hasRead} type="primary">已读</Button>
              <Button danger onClick={
                () => {
                  /* 点击调用删除 */
                  this.props.delMsg(index)
                }
              }>删除</Button>
            </List.Item>
          )}
        />
      </div>
    )
  }
}
// 将state与组件props进行绑定
const mapStateToProps = (state) => {
  return {
    msgLists: state.msg.msgLists
  }
}
// 将提交action方法 定义在props
const mapDispatchToProps = (dispatch) => {
  return {
    setReadState: (index) => {
      dispatch(set_read_state(index))
    },
    delMsg: (index) => {
      Modal.confirm({
        title: '删除文章？',
        /* 删除的图标 */
        content: '真的要删除吗？',
        /* ok */
        onOk: () => {
          message.success('已删除')
          dispatch(del_msg(index))
        },
        /* 取消 */
        onCancel() {

        },
      })

    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(MsgList)